<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴</title>
    <script src="jquery-2.0.3.js"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    img {
        border: none;
        width: 700px;
        height: 400px;
        border: solid 5px white;
        filter: grayscale(100%)
    }
    
    img:hover {
        filter: grayscale(0%)
    }
    
    .box {
        width: 1200px;
        height: 500px;
        margin: 50px auto;
        overflow: hidden;
    }
    
    li {
        float: left;
        list-style: none;
        width: 106px;
        height: 400px;
        overflow: hidden;
    }
    </style>
</head>
<script>
$(function() {
    $("ul li").mouseover(function() {
        $(this).stop().animate({
            width: 538
        }, 500).siblings().stop().animate({
            width: 106
        }, 500)
    })
})
</script>

<body>
    <div class="box">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
            <li><img src="images/6.jpg"></li>
            <li><img src="images/7.jpg"></li>
        </ul>
    </div>
</body>

</html>
